<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body class="index">

<!-- 头部 -->
<section id="hd">
    <h3>个　人</h3>
</section>
<!-- 头部 end-->

<!-- 主内容 -->
<section id="bd">

    <div class="m-user">
        <a class="a-off" href="" @click.prevent="logout">退出登录</a>
        <div class="pic"><a href=""><img :src="'img/pic'+sex+'.png'" alt=""></a></div>
        <h3><a v-text="info.Name">弹指一梦</a></h3>
    </div>

    <ul class="ul-list1">
        <li>
            <div class="col-l"><a href="task.html">个人任务</a></div>
            <div class="col-r"><a href="myactivity.html">我的活动</a></div>
        </li>
        <li>
            <a href="">
                <span v-text="info.School.Name"></span>
                <i style="background-image:url(img/icon6.png);"></i>学　　校
                <!--todo 不知链接到哪里-->
            </a>
        </li>
        <li>
            <a href="rank.html">
                <i style="background-image:url(img/icon7.png);"></i>五项排名
            </a>
        </li>
        <li>
            <a href="measure.html">
                <i style="background-image:url(img/icon8.png);"></i>个人测量
            </a>
        </li>
        <li>
            <a href="">
                <span><em>5</em></span>
                <!--todo 联系客服的消息数量-->
                <i style="background-image:url(img/icon9.png);"></i>联系客服
            </a>
        </li>
    </ul>


</section>
<!-- 主内容 end-->

<!-- 底部 -->
<div class="h50"></div>
<section id="fd">
    <ul class="f-nav">
        <li class="on"><a href="index.html"><i class="icon1"></i>首页</a></li>
        <li><a href="constitution.html"><i class="icon2"></i>体质</a></li>
        <li><a href="constitution.html"><i class="icon-quanzi"></i>圈子</a></li>
        <li><a href="self.html"><i class="icon3"></i>个人</a></li>
    </ul>
</section>
<!-- 底部 end-->

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var vm = new Vue({
        el: '#bd',
        data: {
            info: {
                School:''
            }
        },
        computed:{
          sex:function () {
              return this.info.Sex==='男'?9:10
          }
        },
        beforeCreate: function () {
            var _ = this;
            axios.student('/info')
                .then(function (res) {
                    if (res.data.Code === 0) {
                        _.info = res.data.Detail;
                    } else if (res.data.Code === 2) {
                        location.href = "/login.html?refer=" + location.href;
                    }
                })
        },
        methods: {
            logout:function () {
                axios.student('/logout')
                    .then(function (res) {
                        if(res.data.Code===0){
                            location.href="login.html"
                        }
                    })
            }
        }
    })
</script>
</body>
</html>